<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="renderer" content="webkit">
    <!-- 避免IE使用兼容模式 -->
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>项目详情</title>
    <script type="text/javascript" src="./../../../static/js/include/_include-css.js"></script>

</head>

<body class="bg-gray">
    <div class="wrapper">
        <div class="wrapper-content">
            <div class="panel">
                <div class="panel-heading">基本信息</div>
                <div class="panel-body">
                    <table class="table table-info-view column-3">
                        <tr>
                            <th>项目编号：</th>
                            <td>ZFXM1001</td>
                            <th>项目名称：</th>
                            <td>软件设计项目</td>
                            <th>项目状态：</th>
                            <td><label class="label label-primary">进行中</label></td>
                        </tr>
                        <tr>
                            <th>项目开始日期：</th>
                            <td>2022-01-01</td>
                            <th>项目结束日期：</th>
                            <td>2023-01-01</td>
                            <th>任务数量：</th>
                            <td>32</td>
                        </tr>
                        <tr>
                            <th>项目经理：</th>
                            <td>赵佳佳</td>
                            <th>联系电话：</th>
                            <td>1888888888</td>
                            <th>电子邮箱：</th>
                            <td>zhjj@123.com</td>
                        </tr>
                        <tr>
                            <th>项目进度：</th>
                            <td colspan="5">
                                <small>当前进度：45%</small>
                                <div class="progress progress-xs">
                                    <div class="progress-bar" style="width: 45%;"></div>
                                </div>
                            </td>
                        </tr>
                    </table>
                </div>
            </div>
            <div class="panel">
                <div class=" nav-tabs-easy">
                    <ul class="nav nav-tabs ">
                        <li class="active">
                            <a href="#tab51" data-toggle="tab" aria-expanded="true">任务列表</a>
                        </li>
                        <li class="">
                            <a href="#tab52" data-toggle="tab">成员信息</a>
                        </li>
                        <li>
                            <a href="#tab53" data-toggle="tab">合同清单</a>
                        </li>
                        <li>
                            <a href="#tab54" data-toggle="tab">物料信息</a>
                        </li>
                    </ul>
                    <div class="tab-content panel-body">
                        <div class="tab-pane active" id="tab51">
                            <table class="table table-head table-hover">
                                <thead>
                                    <tr>
                                        <th>任务名称</th>
                                        <th>完成进度</th>
                                        <th>开始时间</th>
                                        <th>结束时间</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <tr>
                                        <td>竞品分析</td>
                                        <td>
                                            <small>当前进度：45%</small>
                                            <div class="progress progress-xs">
                                                <div class="progress-bar" style="width:45%"></div>
                                            </div>
                                        </td>
                                        <td>2022-01-01</td>
                                        <td>2022-03-01</td>
                                    </tr>
                                    <tr>
                                        <td>竞品分析</td>
                                        <td>
                                            <small>当前进度：20%</small>
                                            <div class="progress progress-xs">
                                                <div class="progress-bar" style="width:20%"></div>
                                            </div>
                                        </td>
                                        <td>2022-01-01</td>
                                        <td>2022-03-01</td>
                                    </tr>
                                    <tr>
                                        <td>需求确认</td>
                                        <td>
                                            <small>当前进度：60%</small>
                                            <div class="progress progress-xs">
                                                <div class="progress-bar" style="width:60%"></div>
                                            </div>
                                        </td>
                                        <td>2022-01-01</td>
                                        <td>2022-03-01</td>
                                    </tr>
                                    <tr>
                                        <td>原型设计</td>
                                        <td>
                                            <small>当前进度：45%</small>
                                            <div class="progress progress-xs">
                                                <div class="progress-bar" style="width:45%"></div>
                                            </div>
                                        </td>
                                        <td>2022-01-01</td>
                                        <td>2022-03-01</td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                        <div class="tab-pane" id="tab52">
                            <div class="row">
                                <div class="col-xs-12 table-toolbar-hide">
                                    <table id="bootstrap-table" ></table>
                                </div>
                            </div>
                        </div>
                        <div class="tab-pane" id="tab53">
                            系统设置
                        </div>
                        <div class="tab-pane" id="tab54">
                            菜单设置
                        </div>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-xs-12 text-center">
                    <a class="btn btn-danger" href="javascript:;" onclick="$.modal.closeTab();"><i class="fa fa-fw fa-remove"></i>关&nbsp;&nbsp;闭</a>
                </div>
            </div>
        </div>
    </div>
    <script type="text/javascript" src="./../../../static/js/include/_include-js.js"></script>
    <script>
        $(function () {
            var options = {
                url: "./../../../static/data/user_list.json",
                method: 'get',
                modalName: '用户信息',
                createUrl: "./../../../pages/examples/pages/user_add.html",
                showSearch: false,
                showRefresh: false,
                showToggle: false,
                showColumns: false,
                clickToSelect: false,
                sidePagination: 'client',
                columns: [
                    {
                        title: '序号',
                        width: 5,
                        align: "center",
                        formatter: function (value, row, index) {
                            return $.table.serialNumber(index);
                        }
                    },
                    {
                        field: 'name',
                        title: '姓名'
                    },
                    {
                        field: 'post',
                        title: '职务'
                    },
                    {
                        field: 'phone',
                        title: '手机号码'
                    },
                    {
                        field: 'mail',
                        title: '电子邮箱'
                    }]
            };
            $.table.init(options);
        });
    </script>
</body>

</html>